import { ref, watch } from 'vue'

export const useLoadMore = (
  nodeRef, // 用于监听的 DOM 元素的引用
  loadMore // 加载更多数据的回调函数
) => {
  let observer = null
  const hasMore = ref(true) // 是否有更多数据的标志

  // 监听节点引用的变化
  watch(nodeRef, (newNodeRef, oldNodeRef) => {
    // 如果之前已经存在 observer，则取消对旧元素的观察
    if (oldNodeRef && observer) {
      observer.unobserve(oldNodeRef)
    }
    // 如果新节点存在，初始化 IntersectionObserver
    if (newNodeRef) {
      observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) {
          // 当元素进入视口时
          loadMore() // 触发加载更多数据的函数
        }
      })
      observer.observe(newNodeRef) // 开始观察新的节点
    }
  })

  // 监听 hasMore 的变化，当没有更多数据时停止观察
  watch(hasMore, (value) => {
    if (observer) {
      if (value && nodeRef.value) {
        observer.observe(nodeRef.value) // 继续观察
      } else {
        observer.disconnect() // 停止观察并释放 observer 对象
      }
    }
  })

  return {
    hasMore,
    setHasMore: (value) => {
      hasMore.value = value // 手动设置是否有更多数据
    }
  }
}
